markdown-text-editor 1.9.3 → 1.9.4

package/dist/markdown-text-editor.es.js

@@ -3650,7 +3650,7 @@ var Or = class {
 	}
 }, kr = class {
 	constructor(e) {
-		this.editor = e, this._matches = [], this._currentIndex = -1, this._caseSensitive = !1, this._panel = null, this._findInput = null, this._replaceInput = null, this._countEl = null, this._replaceRow = null, this._caseSensitiveBtn = null, this._highlightEl = null, this._scrollHandler = null, this._taHandler = this._onTextareaKeyDown.bind(this), e.usertextarea.addEventListener("keydown", this._taHandler);
+		this.editor = e, this._matches = [], this._currentIndex = -1, this._caseSensitive = !1, this._panel = null, this._findInput = null, this._replaceInput = null, this._countEl = null, this._replaceRow = null, this._caseSensitiveBtn = null, this._highlightEl = null, this._matchTop = null, this._matchHeight = 0, this._scrollHandler = null, this._taHandler = this._onTextareaKeyDown.bind(this), e.usertextarea.addEventListener("keydown", this._taHandler);
 	}
 	_onTextareaKeyDown(e) {
 		let t = e.ctrlKey || e.metaKey;
@@ -3733,12 +3733,13 @@ var Or = class {
 			this._clearMatchHighlight();
 			return;
 		}
-		let { start: e } = this._matches[this._currentIndex];
-		this._scrollToMatch(this.editor.usertextarea, e), this._showMatchHighlight();
+		this._showMatchHighlight(), this._scrollMatchIntoView();
 	}
-	_scrollToMatch(e, t) {
-		let n = parseInt(window.getComputedStyle(e).lineHeight) || 20, r = e.value.substring(0, t).split("\n").length - 1, i = Math.floor(e.clientHeight / n);
-		e.scrollTop = Math.max(0, (r - Math.floor(i / 2)) * n);
+	_scrollMatchIntoView() {
+		let e = this.editor.usertextarea;
+		if (this._matchTop === null || this._matchHeight <= 0) return;
+		let t = e.clientHeight, n = e.scrollTop, r = this._matchHeight, i = n;
+		this._matchTop - r < n ? i = this._matchTop - r : this._matchTop + this._matchHeight + r > n + t && (i = this._matchTop + this._matchHeight + r - t), i !== n && (e.scrollTop = Math.max(0, i), this._highlightEl && (this._highlightEl.style.top = this._matchTop - e.scrollTop + "px"));
 	}
 	_showMatchHighlight() {
 		if (this._clearMatchHighlight(), this._currentIndex === -1 || !this._matches.length) return;
@@ -3749,7 +3750,7 @@ var Or = class {
 			pointerEvents: "none",
 			top: "0",
 			left: "0",
-			right: "0",
+			width: n.clientWidth + "px",
 			whiteSpace: "pre-wrap",
 			wordBreak: "break-word",
 			overflowWrap: "break-word",
@@ -3764,7 +3765,9 @@ var Or = class {
 		let o = document.createElement("span");
 		o.textContent = n.value.substring(e, t) || "​", a.appendChild(document.createTextNode(n.value.substring(0, e))), a.appendChild(o), a.appendChild(document.createTextNode(n.value.substring(t))), i.appendChild(a);
 		try {
-			let e = i.getBoundingClientRect(), t = o.getBoundingClientRect(), r = document.createElement("div");
+			let e = i.getBoundingClientRect(), t = o.getBoundingClientRect();
+			this._matchTop = t.top - e.top, this._matchHeight = t.height;
+			let r = document.createElement("div");
 			Object.assign(r.style, {
 				position: "absolute",
 				top: t.top - e.top - n.scrollTop + "px",
@@ -3781,7 +3784,7 @@ var Or = class {
 		}
 	}
 	_clearMatchHighlight() {
-		this._highlightEl?.remove(), this._highlightEl = null;
+		this._highlightEl?.remove(), this._highlightEl = null, this._matchTop = null;
 	}
 	_updateCount() {
 		this._countEl && (this._matches.length === 0 ? this._countEl.textContent = this._findInput?.value ? "No results" : "" : this._countEl.textContent = `${this._currentIndex + 1} of ${this._matches.length}`);
@@ -3918,20 +3921,23 @@ var Or = class {
 			this._autoGrow(), this.renderHybrid(), this.debouncedPreview(), this.notifyChange();
 		}, this._scrollHandler = () => {
 			this._scrollRaf ||= requestAnimationFrame(() => {
-				if (this._scrollRaf = null, this.mode === "hybrid" && (this.displayLayer.scrollTop = this.usertextarea.scrollTop, this.displayLayer.scrollLeft = this.usertextarea.scrollLeft), this.preview && this.previewContent) {
-					let e = this.usertextarea, t = e.scrollTop / (e.scrollHeight - e.clientHeight);
-					this.previewContent.scrollTop = t * (this.previewContent.scrollHeight - this.previewContent.clientHeight);
-				}
+				this._scrollRaf = null, this.mode === "hybrid" && (this.displayLayer.scrollTop = this.usertextarea.scrollTop, this.displayLayer.scrollLeft = this.usertextarea.scrollLeft), this.preview && this.previewContent && this._syncPreviewScroll();
 			});
 		}, this.usertextarea.addEventListener("input", this._inputHandler), this.usertextarea.addEventListener("scroll", this._scrollHandler);
 	}
 	debouncedPreview() {
 		this.preview && (clearTimeout(this.previewTimer), this.previewTimer = setTimeout(() => {
-			this.previewContent.innerHTML = this._renderMarkdown(this.usertextarea.value), this.wirePreviewCheckboxes();
-			let e = this.usertextarea, t = e.scrollTop / (e.scrollHeight - e.clientHeight);
-			this.previewContent.scrollTop = t * (this.previewContent.scrollHeight - this.previewContent.clientHeight);
+			let e = this.previewContent.scrollTop;
+			this.previewContent.innerHTML = this._renderMarkdown(this.usertextarea.value), this.wirePreviewCheckboxes(), this._syncPreviewScroll() || (this.previewContent.scrollTop = e);
 		}, 150));
 	}
+	_syncPreviewScroll() {
+		if (!this.preview || !this.previewContent) return !1;
+		let e = this.usertextarea, t = e.scrollHeight - e.clientHeight;
+		if (t <= 0) return !1;
+		let n = e.scrollTop / t, r = this.previewContent.scrollHeight - this.previewContent.clientHeight;
+		return this.previewContent.scrollTop = n * r, !0;
+	}
 	renderMarkdown(e) {
 		return this._renderMarkdown(e);
 	}